<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="时间">
        <template slot-scope="scope">
          {{ scope.row.create_time }}
        </template>
      </el-table-column>
      <el-table-column label="文件名称" align="center" width="300px">
        <template slot-scope="scope">
          {{ scope.row.file_name }}
        </template>
      </el-table-column>
      <el-table-column label="数据类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.data_type | datatypeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文件格式" align="center">
        <template slot-scope="scope">
          {{ scope.row.file_name | filetypeFilter }}
        </template>
      </el-table-column>
      <el-table-column label="文件大小" align="center">
        <template slot-scope="scope">
          {{ (scope.row.file_size / 1024).toFixed(2) + 'MB' }}
        </template>
      </el-table-column>
      <el-table-column label="奖励(dlb)" align="center">
        <template slot-scope="scope">
          {{ 2 }}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
  </div>
</template>

<script>
import { getNodes } from '@/api/table'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  filters: {
    datatypeFilter(data_type) {
      switch (data_type) {
        case 'movie':
          return '影音娱乐'
        case 'health':
          return '健康医疗'
        case 'news':
          return '新闻/广告'
        default:
          return '其它'
      }
    },
    filetypeFilter(filename) {
      return filename.split('.')[1]
    }
  },
  data() {
    return {
      listLoading: false,
      list: null,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 15
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getNodes(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.total
        this.listLoading = false
      })
    }
  }
}
</script>
